<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap风格表单</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
        <form>
            <!-- 文本输入 -->
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
            </div>

            <!-- 密码输入 -->
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>

            <!-- 单选框组 -->
            <div class="form-group">
                <label>性别</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gender" id="male">
                    <label class="form-check-label" for="male">男性</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gender" id="female">
                    <label class="form-check-label" for="female">女性</label>
                </div>
            </div>

            <!-- 复选框 -->
            <div class="form-group">
                <label>兴趣爱好</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="sports">
                    <label class="form-check-label" for="sports">运动</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="music">
                    <label class="form-check-label" for="music">音乐</label>
                </div>
            </div>

            <!-- 下拉选择框 -->
            <div class="form-group">
                <label for="city">所在城市</label>
                <select class="form-control" id="city">
                    <option value="">请选择城市</option>
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </select>
            </div>

            <!-- 按钮组 -->
            <div class="form-group center">
                <button type="submit" class="btn btn-primary">提交</button>
                <button type="reset" class="btn btn-secondary">重置</button>
            </div>
        </form>
    </div>
</body>
</html>